<!--
 * @Author: wuzhen
 * @Date: 2019-12-03 14:04:35
 * @LastEditors  : wuzhen
 * @LastEditTime : 2020-01-13 10:50:49
 * @Description: 表格搜索
 -->

<template>
  <div class="table-search">
    <Form :label-width="labelWidth" inline>
      <slot name="FormItem" />
      <FormItem :label="item.label + '：'" :label-width="item.labelWidth?item.labelWidth : labelWidth" v-for="(item, index) in searchProps" :key="index">
        <template v-if="item.slot">
          <slot :name="item.slot" />
        </template>
        <!-- DatePicker类型 -->
        <template v-else-if="item.type=='date' || item.type=='daterange'">
          <DatePicker :type="item.type" :options="item.options || {}" :placeholder="item.placeholder" @on-change="(e) => searchParams[item.key] = e" style="width: 100%"></DatePicker>
        </template>
        <!-- Select类型 -->
        <template v-else-if="item.type=='select'">
          <Select v-model="searchParams[item.key]" :multiple="item.multiple" :placeholder="item.placeholder" :clearable="!item.isClearable" @on-clear="onClear(item)" style="100%" @on-change="(e) => selectChange(item.key, e)">
            <Option v-for="child in item.options.data" :value="child.value" :key="child.value" :label="child.label"></Option>
          </Select>
        </template>
        <!-- 默认input类型 -->
        <template v-else>
          <Input :type="item.type?item.type:'text'" @keyup.enter.native="handleFilter" v-model="searchParams[item.key]" :placeholder="item.placeholder" :clearable="true" class="filter-item" style="width: 100%;">
          </Input>
        </template>
      </FormItem>
      <FormItem :label-width='0' :style="searchProps.length>0?'margin-left: 20px;': ''">
        <Button v-if="searchProps.length>0" type="primary" :style="{'margin-right': searchProps.length>0?'10px':''}" @click="handleFilter">查询</Button>
        <template v-if="searchButtons.length > 0">
          <Button :type="item.type?item.type: 'primary'" :style="{'margin-right': '10px'}" @click="handleClick(item.btnType)" v-for="(item, index) in searchButtons" :key="index">{{item.text}}</Button>
        </template>
        <!-- @slot 自定义按钮 -->
        <slot name="buttons"></slot>
      </FormItem>
    </Form>
  </div>
</template>
<script>
export default {
  props: {
    // 查询参数配置
    searchProps: {
      type: Array,
      default: () => []
    },
    // 表单按钮
    searchButtons: {
      type: Array,
      default: () => []
    },
    labelWidth: {
      type: [String, Number],
      default: 90
    }
  },
  data() {
    return {
      searchParams: {}
    };
  },
  created() {
    if (this.searchProps.length > 0) {
      this.searchProps.forEach(v => {
        if (v.isDefault) {
          this.searchParams[v.key] = v.default;
        } else {
          this.searchParams[v.key] = "";
        }
      });
    }
  },
  methods: {
    // 搜索
    handleFilter() {
      for (const key in this.searchParams) {
        if (!this.searchParams[key]) {
          this.searchParams[key] = "";
        }
      }
      this.$emit("handle-filter", this.searchParams);
    },
    // 清除
    onClear(item) {
      this.searchParams[item.key] = item.default;
    },
    // 按钮点击
    handleClick(type) {
      this.$emit("handle-click", type);
    },
    // 下拉框选择
    selectChange(key, value) {
      this.$emit("select-change", key, value);
    }
  }
};
</script>